<template>
    <div class="modify-password">
        <div class="p-box">
            <p class="p1">修改密码！</p>
            <p class="p2">Modify password</p>
        </div>

        <van-form @submit="postRetrievePassword">
            <van-field
                v-model="phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                autocomplete="off"
                :rules="[
                    {
                        required: true,
                        message: '请填写手机号',
                        pattern: phoneReg,
                    },
                ]"
            />
            <van-field
                v-model="NewPassword"
                :type="isShow ? 'text' : 'password'"
                name="新密码"
                label="新密码"
                placeholder="新密码"
                :right-icon="isShow ? 'eye-o' : 'closed-eye'"
                @click-right-icon="showPassword"
                autocomplete="off"
                :rules="[
                    {
                        required: true,
                        message: '请填写新密码',
                        pattern: passwordReg,
                    },
                ]"
            />

            <div class="forget-box">
                <div class="forget" @click="goLogon">已有账号，立刻登录</div>
            </div>

            <div>
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    color="#0c34ba"
                    >提交</van-button
                >
            </div>
        </van-form>

        <!-- 弹出层 弹出按钮 -->
        <div style="margin: 50px 15px 0">
            <van-button round block type="default" @click="back"
                >返回</van-button
            >
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: "Modifypassword",
    data() {
        return {
            // 手机号
            phone: "",
            // 新密码
            NewPassword: "",
            //是否 明文显示 新密码
            isShow: false,

            // 手机号正则
            phoneReg: /^1[3-9]\d{9}$/,
            // 密码正则(必须以字母开头, 字母数字_组合[6-16])
            passwordReg: /^[A-Za-z]\w{5,15}$/,
        };
    },
    methods: {
        //切换明文 登录密码
        showPassword() {
            this.isShow = !this.isShow;
        },
        // 跳转到 登录路由
        goLogon() {
            this.$router.push({ name: "Logon" });
        },
        // 返回
        back() {
            this.$router.back();
        },
        // 提交新密码
        postRetrievePassword() {
            this.axios({
                method: "POST",
                url: "/retrievePassword",
                data: {
                    phone: this.phone,
                    password: this.NewPassword
                }
            }).then((result) => {
                

                // 密码修改成功
                if (result.data.code === "L001") {
                    Toast.success('密码修改成功');

                    setTimeout(() => {
                        this.$router.push({ name: "Logon" });
                    }, 1500)
                }
                else { Toast.fail(result.data.msg); }

            }).catch((err) => {
                
            });
        }
    },
};
</script>

<style lang="less" scoped>
.modify-password {
    .p-box {
        margin-top: 100px;
        padding-left: 15px;
        margin-bottom: 50px;

        .p1 {
            font-size: 28px;
            font-weight: 600;
            color: #646566;
        }

        .p2 {
            color: #666;
            margin-top: 36px;
            font-size: 16px;
        }
    }

    /deep/ .van-form {
        padding: 0 15px;

        .forget-box {
            display: flex;
            margin-top: 26px;
            margin-bottom: 54px;
            color: #e99036;
            font-size: 14px;
            .forget {
                margin-left: auto;
            }
        }
    }
}
</style>